<template>
<div>
  <div>
    <el-page-header @back="goBack" content="菜单管理">
    </el-page-header>
    <el-button type="primary" size="small" @click="dialogFormVisible=true;heading='添加菜单';isAdd=true">添加</el-button>
  </div>

  <el-table
    :data="menulist" 
    height="550"
    style="width: 1100px;"
    row-key="id"
    :tree-props="{children: 'children'}"
    border
    stripe
    >
    <el-table-column
      prop="id"
      fixed
      label="菜单编号"
      width="100">
    </el-table-column>
    <el-table-column
      prop="title"
      label="菜单名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="pid"
      label="上级菜单"
      width="120">
    </el-table-column>
    <el-table-column
      prop="icon"
      label="菜单图标"
      width="120">
    </el-table-column>
    <el-table-column
      prop="url"
      label="菜单地址"
      width="300">
    </el-table-column>
    <el-table-column
      label="状态"
      width="120">
      <template slot-scope="item">
        <div>
          <span v-if="item.row.status==1">启用</span>
          <span v-else>禁用</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="item">
        <el-button 
          type="primary"
          icon="el-icon-edit"
          size="small"
          @click="editMenu(item.row.id)">
        </el-button>

        <el-button
          @click.native.prevent="deleteRow(item.row.id)"
          type="danger"
          icon="el-icon-delete"
          size="small">
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog :heading="heading"
    :visible.sync="dialogFormVisible"
    >
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="title">
        <el-input v-model="form.title" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="上级菜单" :label-width="formLabelWidth" prop="pid">
        <el-select v-model="form.pid" placeholder="请选择上级菜单">
          <el-option 
            v-for="item in menulist"
            :key="item.id"
            :label="item.title"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
  
      <el-form-item label="菜单类型" :label-width="formLabelWidth">
        
          <el-radio v-model="form.type" :label="1">目录</el-radio>
          <el-radio v-model="form.type" :label="2">菜单</el-radio>
        
      </el-form-item>

      <el-form-item
          v-if="form.type == 1"
          label="菜单图标"
          :label-width="formLabelWidth"
        >
          <el-select v-model="form.icon" placeholder="请选择">
            
          </el-select>
        </el-form-item>
  
      <el-form-item label="菜单地址" :label-width="formLabelWidth">
        <el-input v-model="form.url" autocomplete="off"></el-input>
      </el-form-item>
  
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-switch 
          v-model="form.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="2"></el-switch>
      </el-form-item>
  
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetForm('form')">取 消</el-button>
      <el-button type="primary" @click="addInfo">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
// 引入辅助性函数
import { mapGetters, mapActions } from 'vuex'

// 引入接口
import { menuAdd, menuDelete, menuInfo, menuEdit } from '../request/api.js'

export default {
  name: 'Menu',
  computed: {
    ...mapGetters({
      menulist: 'menu/getMenu'
    })
  },
  methods: {
      deleteRow(id) {
        this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 调用删除菜单接口
          menuDelete({ id }).then(res => {
            if(res.data.code == 200) {
              this.$message.success(res.data.msg)
              this.getMenu()
            } else {
              this.$message.error(res.data.msg)
            }
          })   
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      goBack() {
        this.$router.push('home')
      },
      editMenu(id) {
        this.dialogFormVisible = true
        this.isAdd = false
        this.heading = '编辑菜单'
        menuInfo({id}).then(res => {
          if(res.data.code == 200) {
            this.form = res.data.list
            // 给编辑表单对象添加id
            this.form.id = id
          } else {
            this.$message.error(res.data.msg)
          }
        })
      },
      resetForm(formName) {
        this.dialogFormVisible = false
        this.form = {
          pid: 0, //上级分类编号  注意：顶级菜单-0
          title: '', //菜单名称
          icon: '', //图标
          type: 1, //类型 1目录2菜单
          url: '', //菜单地址
          status: 1, //状态   1正常2禁用
        }
        // this.$refs[formName].resetFields();
      },
      // 菜单添加
      addInfo() {
        this.dialogFormVisible = false
        this.$refs.form.validate((val) => {
          if(val) {
            // 调用菜单添加接口
            console.log(this.form)
            if(this.isAdd){
              menuAdd(this.form).then((res) => {
                console.log(res)
                if(res.data.code == 200) {
                  this.$message.success(res.data.msg)
                  // 添加成功后重新调用列表接口
                  this.getMenu()
                } else {
                  this.$message.error(res.data.msg)
                }
                this.resetForm('form')
              })  
            } else {
              menuEdit(this.form).then((res) => {
                console.log(res)
                if(res.data.code == 200) {
                  this.$message.success(res.data.msg)
                  // 添加成功后重新调用列表接口
                  this.getMenu()
                } else {
                  this.$message.error(res.data.msg)
                }
                this.resetForm('form')
              })  
            }   
                
          } else {
            console.log('shibai')
          }
        })
      },
      ...mapActions({
        getMenu: 'menu/getMenuAction'
      })
    },
  data() {
    return {
      dialogFormVisible: false,
      heading: '添加菜单',
      isAdd: true,
      form: {
        title: '',
        pid: 0,
        icon: '',
        type: 1,
        url: '',
        status: 1
      },
      formLabelWidth: '120px',
      rules: {
        title: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        pid: [
          { required: true, message: '请选择上级菜单', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.getMenu()
  }
}
</script>